<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-card class="box-card">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" style="left: 30px" @click="showadduserBox"
              >添加用户</el-button
            >
          </el-col>
          <el-col :span="5">
            <el-input placeholder="请输入内容" v-model="searchwords">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchdata()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              icon="el-icon-refresh-left"
              @click="getuserdata()"
            ></el-button>
          </el-col>
        </el-row>
        <transition name="el-zoom-in-center">
          <el-table
            :data="employeelist"
            height="500"
            border
            style="width: 100%; margin-top: 15px"
            v-show="show"
          >
            <el-table-column
              type="index"
              label="#"
              width="100"
            ></el-table-column>
            <el-table-column prop="username" label="姓名"> </el-table-column>
            <el-table-column prop="age" label="年龄"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showeditBox(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="removeUserById(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </el-card>
    </template>
    <!-- 添加用户 -->
    <el-dialog
      title="提示"
      :visible.sync="adduserVisible"
      width="30%"
      @close="adduserDialogClosed"
    >
      <span>添加Employee</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="newUser"
          ref="addUserFormRef"
          :rules="addUserFormRules"
        >
          <el-form-item label="姓名" prop="username">
            <el-input v-model="newUser.username"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="newUser.age" type="number"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="newUser.email"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="hideadduserForm()">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog title="提示" :visible.sync="edituserVisible" width="30%">
      <span>编辑 {{ this.editUser.username }} </span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="editUser"
          ref="editUserFormRef"
          :rules="addUserFormRules"
        >
          <el-form-item label="姓名" prop="username">
            <el-input v-model="editUser.username"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="editUser.age" type="number"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editUser.email"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="edituserVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      searchwords: "",
      employeelist: [],
      adduserVisible: false,
      edituserVisible: false,
      newUser: { username: "", age: "", email: "" },
      editUser: { username: "", age: "", email: "", id: "" },
      addUserFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户名长度在3 ~ 10 位",

            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请填写邮箱", trigger: "blur" },
          {
            type: "string",
            message: "邮箱格式不正确",
            trigger: "blur",
            transform(value) {
              if (
                !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(
                  value
                )
              ) {
                return true;
              }
            },
          },
          {
            type: "string",
            message: "长度不能超过30位",
            trigger: "blur",
            max: 30,
          },
        ],
        age: [
          { required: true, message: "请输入年龄", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "请输入正确的年龄！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getuserdata();
  },
  mounted() {
    this.show = !this.show;
  },
  methods: {
    adduserDialogClosed() {
      this.$refs.addUserFormRef.resetFields();
    },
    edituserDialogClosed() {
      this.$refs.editUserFormRef.resetFields();
    },
    getuserdata() {
      this.token = window.sessionStorage.getItem("token");
      this.$http
        .get("Controller/EmployeeController.php?token=" + this.token)
        .then((res) => {
          if (res.data.code == 200) {
            this.employeelist = res.data.data.employee;
            this.$Message.success("获取数据成功！");
          }
        });
    },
    showadduserBox() {
      this.adduserVisible = true;
    },
    hideadduserForm() {
      this.adduserVisible = false;
    },
    addUser() {
      var params = new URLSearchParams();
      params.append("username", this.newUser.username);
      params.append("age", this.newUser.age);
      params.append("email", this.newUser.email);
      params.append("token", window.sessionStorage.getItem("token"));
      this.$http.post("Controller/EmployeeAdd.php", params).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success("添加新用户成功！");
          console.log(res.data);
          this.adduserVisible = false;
          this.getuserdata();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    removeUserById(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = new URLSearchParams();
          params.append("id", id);
          params.append("token", window.sessionStorage.getItem("token"));
          this.$http
            .post("Controller/EmployeeDelete.php", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("删除用户成功！");
                this.getuserdata();
              } else {
                this.$Message.error("删除用户失败！");
              }
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    showeditBox(user) {
      this.editUser.username = user.username;
      this.editUser.age = user.age;
      this.editUser.email = user.email;
      this.editUser.id = user.id;
      this.edituserVisible = true;
    },
    updateUser() {
      this.$refs.editUserFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        var params = new URLSearchParams();
        params.append("username", this.editUser.username);
        params.append("age", this.editUser.age);
        params.append("email", this.editUser.email);
        params.append("token", window.sessionStorage.getItem("token"));
        params.append("id", this.editUser.id);
        this.$http.post("Controller/EmployeeEdit.php", params).then((res) => {
          if (res.data.code == 200) {
            this.$Message.success(res.data.message);
            this.edituserVisible = false;
            this.getuserdata();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      });
    },
    searchdata() {
      if (this.searchwords == "" || this.searchwords == null) {
        this.$Message.error("请输入用户名进行查询！");
        return;
      }
      var params = new URLSearchParams();
      params.append("words", this.searchwords);
      params.append("token", window.sessionStorage.getItem("token"));
      this.$http.post("Controller/EmployeeQuery.php", params).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success(res.data.message);
          this.employeelist = res.data.data.employee;
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.searchwords = "";
    },
  },
};
</script>

<style>
.box-card {
  margin-top: 30px;
  width: 480ox;
}
</style>
